<template>
  <li>
    <label>
        <input type="checkbox"  :checked="todo.done" @change="handleChecked(todo.id)"/>
          <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger"  @click="handledelete(todo.id)">删除</button>
  </li>
</template>

<script>
export default {
  name: "MyItem",
  //声明接收todo对象
  props:['todo'],
  methods:{
    handleChecked(id){
      //通知app组件将对应的todo的done值置反
      this.$bus.$emit('checkedtodo',id)
     // this.checkedtodo(id)
    },
    handledelete(id){
      console.log("item",id)
      if(confirm("确定删除吗？")) {
        //通知app组件将对应的todo的删除
        this.$bus.$emit('deletetodo',id)
        //this.deletetodo(id)
      }
    }
  },
  mounted(){
    console.log(this.todo)

  }
}
</script>

<style scoped>
  li{
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border: 1px solid #f8dede;
  }
  li label{
    float: left;
    cursor: pointer;
  }
  li label li input{
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }
  li button{
    float: right;
    display: none;
    margin-top: 3px;
  }
  li:before{
    contain: initial;
  }
  li:last-child{
    border-bottom: none;
  }
  li:hover{
    background-color: #f6e5e5;
  }
  li:hover button{
    display: block;
  }
</style>